<template>
  <section id="top-nav" ref="nav">
    <section class="btn-list" ref="btnList">
      <a-button @click="visibleAddNav=true">
        <svg width="20" height="20" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
          <g id="Frame">
            <path id="Vector" d="M16 0H0V16H16V0Z" fill="white" fill-opacity="0.01"/>
            <path id="Vector_2"
                  d="M8.00016 14.6666C11.6821 14.6666 14.6668 11.6818 14.6668 7.99992C14.6668 4.31802 11.6821 1.33325 8.00016 1.33325C4.31826 1.33325 1.3335 4.31802 1.3335 7.99992C1.3335 11.6818 4.31826 14.6666 8.00016 14.6666Z"
                  stroke="#98A6AD" stroke-linejoin="round"/>
            <path id="Vector_3" d="M8 5.33325V10.6666" stroke="#98A6AD" stroke-linecap="round" stroke-linejoin="round"/>
            <path id="Vector_4" d="M5.3335 8H10.6668" stroke="#98A6AD" stroke-linecap="round" stroke-linejoin="round"/>
          </g>
        </svg>
        <p>添加导航栏</p>
      </a-button>
      <a-button @click="batchDeleteNav">
        <svg width="20" height="20" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
          <g id="Frame">
            <path id="Vector"
                  d="M7.99967 14.6666C11.6816 14.6666 14.6663 11.6818 14.6663 7.99992C14.6663 4.31802 11.6816 1.33325 7.99967 1.33325C4.31777 1.33325 1.33301 4.31802 1.33301 7.99992C1.33301 11.6818 4.31777 14.6666 7.99967 14.6666Z"
                  stroke="#98A6AD" stroke-linejoin="round"/>
            <path id="Vector_2" d="M9.88549 6.11426L6.11426 9.88549" stroke="#98A6AD" stroke-linecap="round"
                  stroke-linejoin="round"/>
            <path id="Vector_3" d="M6.11426 6.11426L9.88549 9.88549" stroke="#98A6AD" stroke-linecap="round"
                  stroke-linejoin="round"/>
          </g>
        </svg>
        <p>批量删除导航栏</p>
      </a-button>
    </section>
    <section class="nav-list">
      <a-table
          :row-selection="{
          selectedRowKeys: selectedRowKeys,
          onChange: onSelectChange}"
          :data-source="navArr"
          :loading="isLoading"
          :pagination="false"
          :scroll="{ y: 640 }"
          :rowKey="(record, index) => record.id"
          :class="isEmpty ? '' :'nav-empty'"
      >
        <a-table-column key="create_time" title="日期" data-index="create_time" align="center" width="150px">
          <template #default="{ record }">
            <span>{{ record.create_time }}</span>
          </template>
        </a-table-column>
        <a-table-column key="route" title="设置链接" data-index="route" align="center" width="400px">
          <template #default="{ record }">
            <span>{{ record.route }}</span>
          </template>
        </a-table-column>
        <a-table-column key="name" title="导航栏名称" data-index="name" align="center" width="200px">
          <template #default="{ record }">
            <span>{{ record.name }}</span>
          </template>
        </a-table-column>
        <a-table-column key="component" title="导航栏组件路径" data-index="component" align="center" width="400px">
          <template #default="{ record }">
            <span>{{ record.component }}</span>
          </template>
        </a-table-column>
        <a-table-column key="operation" title="操作" data-index="operation" align="center" width="280px">
          <template #default="{ record }">
            <section class="operation" ref="operation">
              <a-button type="primary" @click="handleEditNav(record)">编辑</a-button>
              <a-button type="primary" danger @click="handleDeleteNav(record)">删除</a-button>
            </section>
          </template>
        </a-table-column>
      </a-table>
    </section>
  </section>
  <!--    添加导航栏-->
  <a-modal v-model:visible="visibleAddNav" :footer="null" :getContainer="$refs.nav" class="edit-model"
           :closable="false">
    <section class="edit-header">
      <h1>添加导航栏 </h1>
      <h2>Add navigation bar</h2>
    </section>
    <section class="edit-body">
      <a-input v-model:value="addNav.name" placeholder="导航栏名称"/>
      <a-input v-model:value="addNav.route" placeholder="导航栏链接"/>
      <a-input v-model:value="addNav.component" placeholder="导航栏组件路径"/>
    </section>
    <section class="edit-footer">
      <a-button @click="visibleAddNav=false">取消</a-button>
      <a-button @click="handleAddNav" :loading="editLoad">添加</a-button>
    </section>
  </a-modal>
  <!--    编辑导航栏-->
  <a-modal v-model:visible="visibleEditNav" :footer="null" :getContainer="$refs.nav" class="edit-model"
           :closable="false">
    <section class="edit-header">
      <h1>编辑导航栏</h1>
      <h2>Edit navigation bar</h2>
    </section>
    <section class="edit-body">
      <a-input v-model:value="edit.name" placeholder="导航栏名称"/>
      <a-input v-model:value="edit.route" placeholder="导航栏链接"/>
      <a-input v-model:value="edit.component" placeholder="导航栏组件路径"/>
    </section>
    <section class="edit-footer">
      <a-button @click="visibleEditNav=false">取消</a-button>
      <a-button @click="handleKeepNav" :loading="editLoad">保存</a-button>
    </section>
  </a-modal>
  <!--  删除导航栏-->
  <a-modal v-model:visible="visibleDeleteNav" :footer="null" :getContainer="$refs.nav" width="374px">
    <section style="text-align: center">
      <h2 class="modal-title">是否确认删除此导航栏</h2>
      <p class="modal-content">点击确认后，不得撤销此操作</p>
    </section>
    <section class="modal-button">
      <a-button type="primary" @click="visibleDeleteNav=false">取消</a-button>
      <a-button type="primary" @click="handleConfirmDelNav" :loading="editLoad">确定</a-button>
    </section>
  </a-modal>
  <!--  确认批量删除导航栏-->
  <a-modal v-model:visible="visibleConfirmBatchDelete" :footer="null" width="330px" :getContainer="$refs.nav"
           class="confirm-reset-pwd-box" style="top: 11%;">
    <section style="text-align: center">
      <h2 class="modal-title">是否确认批量删除导航栏</h2>
      <p class="modal-content">点击确认后，不得撤销此操作</p>
    </section>
    <section class="modal-button">
      <a-button type="primary" @click="visibleConfirmBatchDelete=false">取消</a-button>
      <a-button type="primary" @click="confirmBatchDelete" :loading="editLoad">确定</a-button>
    </section>
  </a-modal>
</template>
<script>
import {defineComponent, getCurrentInstance, ref, onMounted, reactive, computed, toRefs} from 'vue'
import {message} from "ant-design-vue"

export default defineComponent({
  name: "setNav",
  setup() {
    const {proxy} = getCurrentInstance()
    let navArr = ref([]);
    let isLoading = ref(true)
    let isEmpty = ref(false)
    let editLoad = ref(false)
    let visibleEditNav = ref(false)
    let visibleConfirmBatchDelete = ref(false)
    let visibleAddNav = ref(false)
    let visibleDeleteNav = ref(false)
    const state = reactive({
      selectedRowKeys: [],
      loading: false,
    });
    const hasSelected = computed(() => state.selectedRowKeys.length > 0);
    const onSelectChange = selectedRowKeys => {
      state.selectedRowKeys = selectedRowKeys;
    };
    let delId = ref("")
    let edit = reactive({
      id: '',
      name: '',
      route: '',
      component: '',
    })
    let addNav = reactive({
      name: '',
      route: '',
      component: '',
    })

    const handleEditNav = (record) => {
      visibleEditNav.value = true
      edit.id = record.id
      edit.name = record.name
      edit.route = record.route
      edit.component = record.component
    }
    const handleKeepNav = () => {
      editLoad.value = true
      proxy.$request(proxy.$getRoute(56).route_method, proxy.$getRoute(56).route_url, edit).then(res => {
        editLoad.value = false
        visibleEditNav.value = false
        proxy.$request(proxy.$getRoute(54).route_method, proxy.$getRoute(54).route_url, {}).then(res => {
          navArr.value = res.data
          isLoading.value = false
          message.success("保存成功")
        })
      })
    }
    const handleAddNav = () => {
      proxy.$request(proxy.$getRoute(53).route_method, proxy.$getRoute(53).route_url, addNav).then(res => {
        navArr.value = res.data
        isLoading.value = false
        visibleAddNav.value = false
        proxy.$request(proxy.$getRoute(54).route_method, proxy.$getRoute(54).route_url, {}).then(res => {
          navArr.value = res.data
          isLoading.value = false
          message.success("添加成功")
          addNav.name = ''
          addNav.route = ''
          addNav.component = ''
        })
      })
    }
    const handleDeleteNav = (record) => {
      visibleDeleteNav.value = true
      delId.value = record.id
    }
    const handleConfirmDelNav = () => {
      console.log(delId.value);
      editLoad.value = true
      proxy.$request(proxy.$getRoute(55).route_method, proxy.$getRoute(55).route_url, {
        id: delId.value
      }).then(res => {
        editLoad.value = false
        visibleDeleteNav.value = false
        proxy.$request(proxy.$getRoute(54).route_method, proxy.$getRoute(54).route_url, {}).then(res => {
          navArr.value = res.data
          isLoading.value = false
          message.success('删除成功')
        })
      })
    }
    const batchDeleteNav = () => {
      if (!state.selectedRowKeys.length) {
        message.warn("请选择批量删除的导航栏")
      } else {
        visibleConfirmBatchDelete.value = true
      }
    }
    const confirmBatchDelete = () => {
      editLoad.value = true
      let deleteNavStr = ''
      state.selectedRowKeys.forEach(x => {
        deleteNavStr += x + ","
      })
      proxy.$request(proxy.$getRoute(57).route_method, proxy.$getRoute(57).route_url, {
        id: deleteNavStr.slice(0, -1)
      }).then(res => {
        editLoad.value = false
        visibleConfirmBatchDelete.value = false
        message.success('批量删除成功')
        proxy.$request(proxy.$getRoute(54).route_method, proxy.$getRoute(54).route_url, {}).then(res => {
          navArr.value = res.data
          isLoading.value = false
        })
      })
    }
    onMounted(() => {
      proxy.$request(proxy.$getRoute(54).route_method, proxy.$getRoute(54).route_url, {}).then(res => {
        navArr.value = res.data
        isLoading.value = false
      })
    })

    return {
      hasSelected,
      ...toRefs(state),
      onSelectChange,
      navArr,
      isLoading,
      isEmpty,
      visibleEditNav,
      visibleAddNav,
      visibleDeleteNav,
      visibleConfirmBatchDelete,
      editLoad,
      handleEditNav,
      handleKeepNav,
      handleAddNav,
      handleDeleteNav,
      handleConfirmDelNav,
      batchDeleteNav,
      confirmBatchDelete,
      addNav,
      edit
    }
  }
})
</script>

<style lang="less">
@selectColor: #6777EF;
#top-nav {
  .btn-list {
    display: flex;
    gap: 16px;
    margin-bottom: 18px;
  }

  .btn-list > button {
    display: flex;
    align-items: center;
    height: 52px;
    border-radius: 6px;
    border: none;
    background: #fff;
    box-shadow: none;
  }

  .btn-list > button:first-child {
    width: 130px;
  }

  .btn-list > button:last-child {
    width: 155px;
  }

  .btn-list > button:nth-child(3) a {
    display: flex;
    align-items: center;
  }

  .btn-list > button p {
    margin: 0 0 0 4px;
    font-size: 14px;
    font-weight: 400;
    color: #98A6AD;
    line-height: 20px;
    letter-spacing: 0.5px;
  }

  .modal-button {
    justify-content: space-between;
  }

  .modal-button button {
    height: 36px;
    padding: 7px 18px;
    font-size: 14px;
    font-family: PingFang SC-Regular, PingFang SC;
    line-height: 22px;
    border: none;
    border-radius: 6px;
    width: 70px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 10px;
    color: #fff;
  }

  .modal-button button:first-child {
    background: @selectColor;
  }

  .modal-button button:last-child {
    background: #EB5757;
  }

  .ant-table-thead > tr > th, .ant-table-header {
    font-size: 16px;
    font-weight: 400;
    color: #98A6AD;
    line-height: 19px;
    background: #fff !important;
  }

  .ant-table-tbody > tr > td {
    border: none;
  }

  .ant-table-body {
    overflow-y: auto !important;
  }

  .ant-table {
    font-size: 16px;
    font-weight: 400;
    color: #262626;
    line-height: 19px;
    white-space: nowrap;
  }

  .ant-table-row-cell-break-word {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .loading {
    width: 100%;
    height: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
  }

  .operation {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
  }

  .operation button, .btn-list .ant-modal-body button {
    width: 74px;
    height: 36px;
    border-radius: 8px;
    font-size: 13px;
    letter-spacing: 0;
    font-weight: 500;
    color: #FFFFFF;
    line-height: 15px;
  }

  .operation button:first-child, .btn-list .ant-modal-body button:first-child {
    background: #6777EF;
  }

  .operation > button:last-child, .btn-list .ant-modal-body button:last-child {
    background: #EB5757;
  }

  .edit-model {
    width: 332px !important;
    height: 420px;
    box-sizing: border-box;
  }

  .edit-model .ant-modal-body > section {
    width: 100%;
  }

  .edit-model .edit-header h1 {
    font-size: 32px;
    font-weight: bold;
    color: #000000;
    line-height: 38px;
    text-align: center;
    margin-bottom: 2px;
  }

  .edit-model .edit-header h2 {
    font-size: 14px;
    font-weight: bold;
    color: #D9D9D9;
    line-height: 14px;
    text-transform: uppercase;
    text-align: center;
  }

  .edit-model .edit-body {
    margin-top: 20px;
    height: 160px;
    display: flex;
    flex-wrap: wrap;
    align-content: space-around;
  }

  .edit-model .edit-body input,
  .edit-model .edit-body .ant-select-selector {
    width: 268px;
    height: 40px;
    background: rgba(207, 207, 207, 0.1);
    border-radius: 6px 6px 6px 6px;
  }

  .edit-model .ant-select-selection-item {
    text-align: left;
    line-height: 38px;
  }

  .edit-model .edit-footer {
    margin-top: 24px;
    display: flex;
    justify-content: space-between;
  }

  .edit-model .edit-footer button {
    height: 36px;
    padding: 7px 18px;
    font-size: 14px;
    font-family: PingFang SC-Regular, PingFang SC;
    font-weight: 400;
    line-height: 22px;
    border: none;
    border-radius: 6px;
  }

  .edit-model .edit-footer button:first-child {
    background: #F2F3F5;
    color: #000;
  }

  .edit-model .edit-footer button:last-child {
    background: #6777EF;
    color: #fff;
  }

  .nav-empty .ant-empty {
    display: none !important;
  }

  .nav-empty .ant-table-placeholder {
    height: 100px;
  }
}
</style>
